<template>
  <view class="nav-container" 
    :style="{
      height: `${statusBarHeight + navBarHeight}px`,
      backgroundColor: bgColor
    }">
    <!-- 状态栏占位 -->
    <view :style="{ height: `${statusBarHeight}px` }" />
    
    <!-- 导航内容区 -->
    <view class="nav-content" :style="{ height: `${navBarHeight}px` }">
      <!-- 左侧区域 -->
      <view class="nav-left">
        <slot name="left">
          <view v-if="showBack" @click="navigateBackFunc">
            <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/back.png" mode="widthFix" v-if="props.leftNav" />
			 <image src="/static/home1.png" mode="widthFix" v-if="!props.leftNav" />
          </view>
        </slot>
      </view>
      
      <!-- 中间标题 -->
      <view class="nav-title">
        <slot name="title">{{ title }}</slot>
      </view>
      
      <!-- 右侧胶囊占位 -->
      <view :style="{ width: `${menuRight}px` }" />
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 导航栏配置参数
const props = defineProps({
  title: { type: String, default: '' },
  bgColor: { type: String, default: '' },
  showBack: { type: Boolean, default: true },
  leftNav:{type: Boolean, default: true}
})

// 动态计算高度
const statusBarHeight = ref(0)
const navBarHeight = ref(44)
const menuRight = ref(0)

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 微信小程序胶囊处理
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  navBarHeight.value = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
  menuRight.value = systemInfo.windowWidth - menuButtonInfo.right
})
const navigateBackFunc=()=>{
	if(props.leftNav){
		uni.navigateBack()
	}else{
		uni.reLaunch({
			url:'/pages/home/home'
		})
	}
	
}
</script>



<style scoped>
.nav-container {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.nav-content {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.nav-left image {
  width: 24px;
  height: 24px;
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
}
</style>
